import { AreaLinkageContainerProps } from "../typings/AreaLinkageProps";
import { Cascader } from "antd";
import "antd/dist/antd.css";
import { createElement } from "react";
import { useState, useEffect } from "react";
import {ValueStatus} from "mendix"
import { useCallback } from "react";
import _all from "./data/all"

// 使用静态./data/all.tsx json数据
// 开发者可以自行使用china-division之类的库，当数据发生改变之后，加载新的行政数据
export default function CascaderUI(props: AreaLinkageContainerProps) {
  const [value, setAttribute] = useState('');
  useEffect(() => {
    if (props.responseAttribute && props.responseAttribute.status === ValueStatus.Available) {
      setAttribute(props.responseAttribute.value || '');
    }
  }, [props.responseAttribute]);

  const onchange = useCallback(
      (value, selectedOption: any) => {
          if (props.responseAttribute) {
            const selectedValue = selectedOption.map((item: { label: any; }) =>  { return item.label})
            props.responseAttribute.setValue(selectedValue.toString());
          }
          console.log(value)
      },
      [props.responseAttribute],
)

  return (
    <Cascader
      value={value.split(',')}
      options={_all}
      // defaultValue= {props.defaultValue.split(",")}
      onChange={onchange}
      placeholder = {props.placeholder}
      showSearch = {props.isSearchable}
      style={{ width: '100%' }}
    />
  );

}
